<template>
	<view class="baseInfo_container">
		<view class="baseTitle">
			<text></text>基础信息
		</view>
		<u-form :model="baseInfoForm" :rules="baseInfoFormRules" ref="baseInfoForm">
			<u-form-item label="姓名" prop="name" :required="true" labelWidth="80" labelStyle="color: #000" :userStyle="userStyle" borderBottom>
				<u-input v-model="baseInfoForm.name" :disabled="hasBaseInfo && (hasBaseInfo && !isChangeBaseInfo)" width="425rpx" placeholder="请填写" maxlength="50" :customStyle="userInputStyle" placeholderStyle="font-size: 26rpx"></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="gender" :required="true" labelWidth="80" labelStyle="color: #000" :userStyle="userStyle" borderBottom>
				<uni-data-select v-model="baseInfoForm.gender" :disabled="hasBaseInfo && (hasBaseInfo && !isChangeBaseInfo)" :localdata="genderList" :clear="false" placeholder="请选择"></uni-data-select>
			</u-form-item>
			<u-form-item label="电话" prop="phone" :required="true" labelWidth="80" labelStyle="color: #000" :userStyle="userStyle" borderBottom>
				<u-input v-model="baseInfoForm.phone" :disabled="hasBaseInfo && (hasBaseInfo && !isChangeBaseInfo)" width="425rpx" placeholder="请填写" maxlength="11" :customStyle="userInputStyle" placeholderStyle="font-size: 26rpx"></u-input>
			</u-form-item>
			<u-form-item label="身高" prop="height" :required="true" labelWidth="80" labelStyle="color: #000" :userStyle="userStyle" borderBottom>
				<u-input v-model="baseInfoForm.height" :disabled="hasBaseInfo && (hasBaseInfo && !isChangeBaseInfo)" placeholder="请填写" maxlength="10" :customStyle="{width: '200rpx'}" placeholderStyle="font-size: 26rpx"></u-input><text style="position: absolute;right: 100px;top: 8px;">cm</text>
			</u-form-item>
			<u-form-item label="体重" prop="weight" :required="true" labelWidth="80" labelStyle="color: #000" :userStyle="userStyle" borderBottom>
				<u-input v-model="baseInfoForm.weight" :disabled="hasBaseInfo && (hasBaseInfo && !isChangeBaseInfo)" placeholder="请填写" maxlength="10" :customStyle="{width: '200rpx'}" placeholderStyle="font-size: 26rpx"></u-input><text style="position: absolute;right: 100px;top: 8px;">kg</text>
			</u-form-item>
			<u-form-item label="BMI" prop="BMI" labelWidth="80" labelStyle="color: #000" :userStyle="userStyle" borderBottom>
				<u-input v-model="baseInfoForm.BMI" maxlength="10" :disabled="true" :customStyle="{width: '100rpx'}" placeholderStyle="font-size: 26rpx"></u-input>
				<text v-if="baseInfoForm.BMI" style="position: absolute;right: 80px;top: 8px;">
					<text v-if="baseInfoForm.BMI <= 18.4" style="color: skyblue">偏瘦</text>
					<text v-if="baseInfoForm.BMI >= 18.5 && baseInfoForm.BMI <= 23.9" style="color: yellowgreen">正常</text>
					<text v-if="baseInfoForm.BMI >= 24.0 && baseInfoForm.BMI <= 27.9" style="color: orange">过重</text>
					<text v-if="baseInfoForm.BMI >= 28.0" style="color: red">肥胖</text>
					(中国标准)
				</text>
			</u-form-item>
			<u-form-item label="出生年月" prop="birthday" :required="true" labelWidth="80" labelStyle="color: #000" :userStyle="userStyle" borderBottom>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="baseInfoForm.birthday" :disabled="hasBaseInfo && (hasBaseInfo && !isChangeBaseInfo)" />
			</u-form-item>
			<u-form-item label="睡姿偏好(单选)" labelPosition="top" labelWidth="200" prop="sleepingPosition" :required="true" labelStyle="color: #000" :userStyle="userStyle" borderBottom>
				<u-subsection :list="sleepingPositionList" :disabled="hasBaseInfo && (hasBaseInfo && !isChangeBaseInfo)" mode="subsection" :current="baseInfoForm.sleepingPosition" @change="positionChange"></u-subsection>
			</u-form-item>
		</u-form>

		<!-- 提交按钮 -->
		<u-button v-if="!hasBaseInfo || (hasBaseInfo && isChangeBaseInfo)" @click="submit" text="提交" color="#016ab7" size="big" shape="circle" :customStyle="buttonStyle"></u-button>

		<!-- 提交成功弹窗 -->
		<u-modal :show="submitSuccessDialog" title="提示" :currentTitleStyle="currentTitleStyle" ref="uModal" class="submitSuccessDialog">
			<view class="slot-content" style="text-align: center; font-size: 28rpx;">
				<text>是否确认提交基本信息，将开始拍照测量</text>
			</view>
			<template slot="confirmButton" class="footer">
				<submitFooter @confirmSubmitSuccessDialog="confirmSubmitSuccessDialog" @closeSubmitSuccessDialog="closeSubmitSuccessDialog" />
			</template>
		</u-modal>

		<!-- 确认修改信息弹窗 -->
		<u-modal :show="changeInfoDialog" title="提示" :currentTitleStyle="currentTitleStyle" ref="uModal1" class="changeInfoDialog">
			<view class="slot-content" style="text-align: center; font-size: 28rpx;">
				<text>是否确认提交个人信息</text>
			</view>
			<template slot="confirmButton" class="footer">
				<submitFooter @confirmSubmitSuccessDialog="confirmSubmitSuccessDialog" @closeSubmitSuccessDialog="closeChangeDialog" />
			</template>
		</u-modal>
	</view>
</template>

<script>
	import submitFooter from "./components/submitFooter.vue";
	import { saveUserInfo, getUserInfo } from '@/api/home.js';
	export default {
		components: {
			submitFooter,
		},
		data() {
			return {
				baseInfoForm: {
					name: '',
					gender: '',
					phone: '',
					height: '',
					weight: '',
					BMI: '',
					birthday: '',
					sleepingPosition: 0,
				},
				userStyle: {
					padding: "20rpx 25rpx",
				},
				userInputStyle: {
					padding: "10rpx 9rpx",
				},
				buttonStyle: {
					marginTop: "40rpx",
				},
				currentTitleStyle: `padding: 20rpx 0;background-color: #ededed;color: #000`,
				genderList: [
					{ value: 1, text: "男" },
					{ value: 2, text: "女" },
					// { value: 0, text: "不详" },
				],
				sleepingPositionList: ['平躺','左侧卧','右侧卧','俯卧'],
				baseInfoFormRules: {
					name: [{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error("请填写姓名"));
							}
							// 校验姓名只能输入中文和英文不能带符号和数字
							let reg = /^[\u4E00-\u9FA5A-Za-z]+$/;
							if (!reg.test(value)) {
								callback(new Error("姓名只能输入中文和英文"));
							} else {
								callback();
							}
						},
						trigger: ['change','blur'],
					}],
					gender: [{
						// 校验baseInfoForm.gender是否为空
						validator: (rule, value, callback) => {
							if (this.baseInfoForm.gender == '') {
								callback(new Error("请选择性别"));
							} else {
								callback();
							}
						},
						trigger: ['change','blur'],
					}],
					phone: [{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error("请填写电话"));
							}
							// 校验手机号格式
							let reg = /^1[3456789]\d{9}$/;
							if (!reg.test(value)) {
								callback(new Error("手机号格式不正确"));
							} else {
								callback();
							}},
						trigger: ['change','blur'],
					}],
					height: [{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error("请填写身高"));
							}
							// 校验身高只能输入数字
							let reg = /^[0-9]*$/;
							if (!reg.test(value)) {
								callback(new Error("身高只能输入数字"));
							} else {
								callback();
							}
						},
						trigger: ['change','blur'],
					}],
					weight: [{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error("请填写体重"));
							}
							// 校验体重只能输入数字
							let reg = /^[0-9]*$/;
							if (!reg.test(value)) {
								callback(new Error("体重只能输入数字"));
							} else {
								callback();
							}
						},
						trigger: ['change','blur'],
					}],
					birthday: [{
						// 校验baseInfoForm.birthday是否为空
						validator: (rule, value, callback) => {
							if (this.baseInfoForm.birthday == '') {
								callback(new Error("请选择出生年月"));
							} else {
								callback();
							}
						},
						trigger: ['change','blur'],
					}],
				},
				submitSuccessDialog: false,
				changeInfoDialog: false,
				hasBaseInfo: false,
				isChangeBaseInfo: false,
			};
		},
		// 添加计算属性,计算baseInfoForm.BMI
		computed: {
			BMI() {
				let height = this.baseInfoForm.height;
				let weight = this.baseInfoForm.weight;
				if (height && weight) {
					let BMI = (weight / ((height / 100) * (height / 100))).toFixed(1);
					this.baseInfoForm.BMI = BMI;
					return BMI;
				} else {
					this.baseInfoForm.BMI = '';
					return '';
				}
			}
		},
		methods: {
			positionChange(index) {
				console.log(index);
				this.baseInfoForm.sleepingPosition = index;
			},
			submit() {
				this.$refs.baseInfoForm.validate().then(res => {
					console.log(res);
					if (res) {
						if (this.isChangeBaseInfo) {
							this.changeInfoDialog = true;
						} else {
							this.submitSuccessDialog = true;
						}
					}
				}).catch(err => {
					console.log(err);
				})
			},
			closeSubmitSuccessDialog() {
				this.submitSuccessDialog = false;
			},
			async confirmSubmitSuccessDialog() {
				let res = await saveUserInfo({
					realName: this.baseInfoForm.name,
					sex: this.baseInfoForm.gender,
					phoneNumber: this.baseInfoForm.phone,
					birthday: this.baseInfoForm.birthday,
					appMemberSubmitUserExpendList: [
						{
							id: 4,
							fieldKey: 'height',
							fieldValue: this.baseInfoForm.height,
						},
						{
							id: 5,
							fieldKey: 'weight',
							fieldValue: this.baseInfoForm.weight,
						},
						{
							id: 6,
							fieldKey: 'bmi',
							fieldValue: this.baseInfoForm.BMI,
						},
						{
							id: 7,
							fieldKey: 'sleepPosition',
							fieldValue: parseInt(this.baseInfoForm.sleepingPosition) + 1,
						},
					]
				})
				if (res.code == 1) {
					if (this.isChangeBaseInfo) {
						uni.navigateBack({
							delta: 1,
						})
						this.changeInfoDialog = false;
					} else {
						uni.redirectTo({
							url: '/subPages/dataMeasurement/dataMeasurement',
						})
						this.submitSuccessDialog = false;
					}
				}
			},
			closeChangeDialog() {
				this.changeInfoDialog = false;
			},
			async getUserInfo() {
				let res = await getUserInfo();
				if (res.code == '1' && res.data.isCompleted) {
					this.baseInfoForm.name = res.data.realName;
					this.baseInfoForm.gender = res.data.sex;
					this.baseInfoForm.phone = res.data.phoneNumber;
					this.baseInfoForm.birthday = res.data.birthday.slice(0, 10);

					// 获取身高体重BMI睡姿偏好
					if (res.data.appMemberFieldInfoList && res.data.appMemberFieldInfoList.length) {
						res.data.appMemberFieldInfoList.forEach(item => {
							if (item.fieldKey == 'height') {
								this.baseInfoForm.height = item.fieldValue;
							}
							if (item.fieldKey == 'weight') {
								this.baseInfoForm.weight = item.fieldValue;
							}
							if (item.fieldKey == 'bmi') {
								this.baseInfoForm.BMI = item.fieldValue;
							}
							if (item.fieldKey == 'sleepPosition') {
								this.baseInfoForm.sleepingPosition = item.fieldValue - 1;
							}
						})
					}
					this.hasBaseInfo = true;
					if (!this.isChangeBaseInfo) {
						uni.redirectTo({
							url: '/subPages/dataMeasurement/dataMeasurement',
						})
					}
				} else {
					wx.enableAlertBeforeUnload({
						message: "是否放弃当前已填写内容?(若放弃将无法进行数据测量)",
						success: function (res) {
							console.log("添加返回拦截成功：", res);
						},
						fail: function (err) {
							console.log("添加返回拦截失败：", err);
						},
					});
				}
			},
		},
		onReady() {
			this.$refs.baseInfoForm.setRules(this.baseInfoFormRules)
		},
		onLoad(option) {
			this.isChangeBaseInfo = option.isChangeBaseInfo ? JSON.parse(option.isChangeBaseInfo) : false;
			this.getUserInfo();
		},
		beforeDestroy() {
			wx.disableAlertBeforeUnload({
				success: function (res) {
					console.log("移除返回拦截成功：", res);
				},
				fail: function (err) {
					console.log("移除返回拦截失败：", err);
				},
			});
		},
	}
</script>

<style lang="scss">
.baseInfo_container {
	padding: 30rpx 20rpx;

	.baseTitle {
		padding: 30rpx 0;
		font-weight: 700;

		text {
			position: relative;
			top: 5.5rpx;
			display: inline-block;
			width: 10rpx;
			height: 32rpx;
			background-color: #016ab7;
			border-radius: 4rpx;
			margin-right: 10rpx;
		}
	}
}
</style>
